<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
     <!-- 引入 Axios -->
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <!-- 用户页面 -->
    <!-- 用户来进行下单，生成订单 -->
    <div id="app">
        <h1>选择用户</h1>
        <select v-model="username">
            <option v-for="(user,index) in users" :key="index" :value="user.buyname">{{user.buyname}}</option>
        </select>
        <!-- 选择商家 -->
        <h1>选择商家</h1>
        <select v-model="shopname">
            <option v-for="(shop,index) in shoplist" :key="index" :value="shop.name">{{shop.name}}</option>
        </select>
        <h1>选择商品</h1>
        <div v-for="(item,index) in oderlist">
            <input type="checkbox" v-model="selectlist" :value="item">{{item.goodsname}}</input>
        </div>
        <button @click="ti">新建订单</button>
    </div>
    <script>
        // 创建一个简单的Vue实例
        new Vue({
            el: '#app',
            data: {
                users: [
                    { buyname: '刘子硕', phone: "999999999", address_user: [116.405125, 39.903371] },
                    { buyname: '尴尬', phone: "777777777", address_user: [116.407742, 39.904429] },
                ],
                username: "",
                usercurrent: {},
                // 商家列表
                shoplist: [
                    { name: '辣小龙小龙虾湘菜馆(凤,凰广场店)', address_shang: [116.407428, 39.904192] },
                    { name: '哪吒脑海(广场店)', address_shang: [116.405285, 39.804192] },
                ],
                shopname: "",
                shopcurrent: {},
                // 商品列表
                oderlist: [
                    { goodsname: '金针榴莲', size: "七寸", spicy: "中辣", price: 88, oldprice: 99, num: 1 },
                    { goodsname: '送落汤', size: "", spicy: "", price: 100, oldprice: null, num: 2 },
                ],
                // 选中的商品列表
                selectlist: [],
                // 订单对象
                order:{},
                // 总价
                totalprice:0
            },
            // 监听username的值
            watch: {
                username: function (newValue, oldValue) {
                    // 当username的值发生变化时，更新usercurrent的值
                    this.usercurrent = this.users.find(user => user.buyname === newValue);
                    // console.log(this.usercurrent);
                },
                shopname: function (newValue, oldValue) {
                    // 当shopname的值发生变化时，更新shopcurrent的值
                    this.shopcurrent = this.shoplist.find(shop => shop.name === newValue);
                    // console.log(this.shopcurrent);
                },
                // 监听selectlist来更改总价totalprice
                selectlist: function (newValue, oldValue) {
                    this.totalprice = this.selectlist.reduce((acc, cur) => acc + cur.price * cur.num, 0);
                }

            },
            methods: {
                ti(){
                    // 新建订单
                    this.order={
                        ...this.usercurrent,...this.shopcurrent,oderlist:this.selectlist,totalprice:this.totalprice
                    }
                    axios.post('http://localhost:3000/addOrder',this.order).then(res=>{
                       const {code}=res.data
                       if(code==200){
                          alert('下单成功')
                       }
                    })

                }
            }

        });
    </script>
</body>

</html>